<template>
	<view>
		<navbar leftTitle="分类" :isBack="false"></navbar>
		<view class="search-wrapper">
			<view class="search-box fa">
				<image class="search-icon" src="../../static/search.png" mode=""></image>
				<input class="flex1" type="text" placeholder="请输入关键字" placeholder-style="font-size:26rpx;color:#aaa;"
					v-model="keyword" @input="keyInput" @confirm="searchGoods">
			</view>
		</view>
		<view class="search-place"></view>
		<view class="filter-wrapper">
			<scroll-view scroll-x="true" class="second-box">
				<view class="second-list" :class="{active: secondIndex == -1}" @click="secondSelectAll">全部</view>
				<view class="second-list" :class="{active: secondIndex == index}" v-for="(item, index) in secondList"
					:key="index" @click="secondChange(index)">{{item.name}}</view>
			</scroll-view>
			<view class="filter-box fa jcsb">
				<view class="filter-list" :class="{active: filterIndex == 0}" @click="filterAll">综合</view>
				<view class="filter-list fa" :class="{active: filterIndex == 1}" @click="filterPrice">
					<view>价格</view>
					<image class="filter-icon" src="../../static/priceup.png" mode="" v-show="isPrice"></image>
					<image class="filter-icon" src="../../static/pricedown.png" mode="" v-show="!isPrice"></image>
				</view>
				<view class="filter-list fa" :class="{active: filterIndex == 2}" @click="filterSales">
					<view>销量</view>
					<image class="filter-icon" src="../../static/priceup.png" mode="" v-show="isSales"></image>
					<image class="filter-icon" src="../../static/pricedown.png" mode="" v-show="!isSales"></image>
				</view>
			</view>
		</view>
		<view class="filter-place"></view>
		<view class="aside">
			<scroll-view class="cate-box" :scroll-y="true" :show-scrollbar="false">
				<view class="cate-list" :class="{active: index == cateIndex}" v-for="(item, index) in cateList"
					:key="index" @click="cateChange(index)">{{item.name}}</view>
			</scroll-view>
		</view>
		<view class="main">
			<view class="goods-box">
				<view class="goods-list flex" v-for="(item, index) in list" :key="index"
					@click="utils.navTo('/pages/cate/goods_detail', {id: item.productId})">
					<image class="goods-image" :src="item.mainImg" mode=""></image>
					<view class="goods-right flex1">
						<view class="name ell2">{{item.name}}</view>
						<view class="sales">销量 {{item.sales}}</view>
						<view class="price-box fa">
							<view class="price">¥{{item.price}}</view>
							<view class="market-price">￥{{item.marketPrice}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata-boxs" v-if="nodata">
				<image class="nodata-img" src="../../static/nodata.png" mode=""></image>
				<view class="nodata-prompt">暂无商品~</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateList: [], //分类
				cateIndex: 0,
				cateId: '',
				secondList: [], //二级分类
				secondIndex: -1, //-1代表全部二级分类的全部 0和后面是二级分类
				secondId: '',
				isPrice: true, //价格筛选
				isSales: true, //销量筛选
				filterIndex: 0, //筛选 0综合 1价格 2销量
				keyword: '',
				page: 1,
				count: 0,
				list: [], //商品列表
				nodata: 0
			};
		},
		onLoad() {
			this.getCate()
		},
		onShow() {
			if (uni.getStorageSync('cateId')) {
				this.cateId = uni.getStorageSync('cateId')
				this.cateIndex = 0
				this.secondId = ''
				this.secondIndex = -1
				this.getList()
				setTimeout(() => {
					uni.removeStorageSync('cateId')
				}, 1000)
			}
		},
		onReachBottom() {
			console.log(this.page)
			if (this.list.length < this.count) {
				this.page++
				this.getList()
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.cateId = 1
				this.secondId = ''
				this.cateIndex = 0
				this.secondIndex = -1
				this.filterIndex = 0
				this.getCate()
				this.page = 1
				this.count = 0
				this.getList()
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			getCate() {
				this.api.cateFunc().then(res => {
					if (res.code == 200) {
						this.cateList = res.data
						this.cateId = this.cateList[0].classifyId
						this.secondList = res.data[0].children
						this.getList()
					}
				})
			},
			keyInput() {
				if (this.keyword == '') {
					this.getList()
				}
			},
			searchGoods() {
				if (!this.keyword) return uni.showToast({
					title: '请输入关键字',
					icon: 'none'
				})
				this.getList()
			},
			getList() {
				let orderByColumn = ''
				let isAsc = ''
				if (this.filterIndex == 0) {
					orderByColumn = ''
					isAsc = ''
				} else if (this.filterIndex == 1) {
					orderByColumn = 'price'
					if (this.isPrice) {
						isAsc = 'ascending'
					} else {
						isAsc = 'descending'
					}
				} else if (this.filterIndex == 2) {
					orderByColumn = 'sales'
					if (this.isSales) {
						isAsc = 'ascending'
					} else {
						isAsc = 'descending'
					}
				}
				this.api.goodsListFunc({
					topClassifyId: this.cateId,
					classifyId: this.secondId,
					name: this.keyword,
					orderByColumn: orderByColumn,
					isAsc: isAsc,
					pageNum: this.page
				}).then(res => {
					if (res.code == 200) {
						this.count = res.total
						this.list = this.page == 1 ? res.rows : this.list.concat(res.rows)
						this.nodata = this.list.length > 0 ? 0 : 1
					}
				})
			},
			// 选择分类
			cateChange(index) {
				this.page = 1
				this.cateIndex = index
				this.cateId = this.cateList[index].classifyId
				this.secondList = this.cateList[index].children
				this.secondIndex = -1
				this.secondId = ''
				this.getList()
				// 滚动到顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
			secondSelectAll() {
				this.page = 1
				this.secondIndex = -1
				this.secondId = ''
				this.getList()
			},
			// 选择二级分类
			secondChange(index) {
				this.page = 1
				this.secondIndex = index
				this.secondId = this.secondList[index].classifyId
				this.getList()
			},
			// 综合筛选
			filterAll() {
				this.page = 1
				this.filterIndex = 0
				this.isPrice = false
				this.isSales = false
				this.getList()
			},
			filterPrice() {
				this.page = 1
				this.filterIndex = 1
				this.isPrice = !this.isPrice
				this.isSales = false
				this.getList()
			},
			filterSales() {
				this.page = 1
				this.filterIndex = 2
				this.isSales = !this.isSales
				this.isPrice = false
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		padding: 12rpx 28rpx;
		box-sizing: border-box;
		height: 90rpx;
		background-color: #fff;
		z-index: 999;

		.search-box {
			padding: 0 20rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background-color: #F6F6F6;

			.search-icon {
				margin-right: 12rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.search-place {
		width: 100%;
		height: 90rpx;
	}

	.filter-wrapper {
		position: fixed;
		left: 0;
		right: 0;
		padding-left: 162rpx;
		height: 164rpx;
		background-color: #fff;
		z-index: 997;

		.second-box {
			padding: 20rpx 0 20rpx 18rpx;
			height: 88rpx;
			white-space: nowrap;
			box-sizing: border-box;

			.second-list {
				display: inline-block;
				margin-right: 20rpx;
				padding: 0 16rpx;
				height: 48rpx;
				line-height: 48rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				color: #777;
				background-color: #F6F6F6;

				&.active {
					color: #fff;
					background: linear-gradient(270deg, #6CE083 0%, #3DBF63 100%);
				}
			}
		}

		.filter-box {
			padding: 22rpx 52rpx 24rpx 58rpx;
			border-top: 1rpx solid #eee;

			.filter-list {
				color: #777;

				&.active {
					color: var(--theme);
				}

				.filter-icon {
					margin-left: 4rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}

	.filter-place {
		width: 100%;
		height: 164rpx;
	}

	.aside {
		position: fixed;
		top: 268rpx;
		left: 0;
		bottom: 0;
		width: 162rpx;
		background-color: #fff;
		z-index: 998;

		.cate-box {
			height: 100%;

			.cate-list {
				padding: 40rpx 10rpx;
				text-align: center;
				font-size: 26rpx;
				color: #999;

				&.active {
					font-size: 30rpx;
					font-weight: bold;
					color: var(--theme);
				}
			}
		}
	}

	.main {
		padding-left: 162rpx;

		.goods-box {
			padding: 20rpx 20rpx 10rpx;

			.goods-list {
				margin-bottom: 20rpx;
				height: 200rpx;
				border-radius: 10rpx;
				background-color: #fff;

				.goods-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx 0 0 10rpx;
				}

				.goods-right {
					padding: 16rpx;

					.name {
						font-size: 26rpx;
						font-weight: bold;
					}

					.sales {
						margin-top: 8rpx;
						font-size: 22rpx;
						color: #aaa;
					}

					.price-box {
						margin-top: 26rpx;
						width: 220rpx;

						.price {
							font-size: 24rpx;
							color: #FE3134;
						}

						.market-price {
							margin-left: 6rpx;
							font-size: 22rpx;
							color: #777;
							line-height: 26rpx;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}

	.nodata-boxs {
		margin-top: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 22rpx;
		color: #aaa;

		.nodata-img {
			width: 300rpx;
			height: 300rpx;
		}
	}
</style>